<template>
    <div class="all">
        <div id="total" :class="tol">
            <h1 :class="h1_c">{{h1}}</h1>
            <div class="u">
                <i class="fa fa-user" aria-hidden="true"></i>
                <input  class="i" type="text" v-model="n1" @click="handleClick01"><br>
            </div>
            <div class="u">
                <i class="fa fa-lock" aria-hidden="true"></i> 
                <input class="i" type="text" v-model="n2" @click="handleClick02"><br>
            </div>
            <div v-if="fg" class="u">
                <i class="fa fa-lock" aria-hidden="true"></i> 
                <input class="i" type="text" v-model="n3" @click="handleClick03"><br>
            </div>
            <!-- <router-link class="b b6" to="/sys"><i class="fa fa-cog" aria-hidden="true"></i> 系统设置</router-link> -->
            <button class="dl" @click="login">{{b1}}</button><br>
            <button id="fgt" class="forgot" @click="changeFogot">{{b2}}</button>
            <button id="bk" class="back" @click="changeBack">{{b3}}</button>

        </div>
        
    </div>
    
</template>



<script>
    module.exports = {
        data(){
            return{
                tol:"",
                h1_c : "",
                n1:"请输入用户名或邮箱",
                n2:"请输入密码",
                n3:"请确认你的密码",
                h1:"电商后台管理系统",
                b1:"登陆",
                b2:"忘记密码",
                b3:"",
                fg: false,
               
            }
        },
        methods:{
                // jump(){
                //     this.tol = "tol";
                //     window.location.href="./option.html";
                // },

                login() {
                                    // 将账号和密码提交给后端，
                                    // 根据后端返回的结果来确定要不要跳转到首页
                                    axios.get("/authentication/login", {
                                        // params : 代表的是需要传递给后端的数据的对象
                                        params: {
                                            username: this.n1,
                                            password: this.n2
                                        }
                                    }).then((response) => {
                                        // 后端传递给前端的数据在 response.data 中
                                        if(response.data == "OK") {
                                            // 后端返回 OK，表示登录成功，跳转到首页
                                            location.href = "option.html";
                                        } else {
                                            alert("账号或密码错误！");
                                            
                                        }
                                    });
                                },

                changeFogot(){
                    this.fg = true;
                    this.h1_c = "h1_c";
                    this.n2 = "请输入新的密码";
                    this.h1 = "忘记密码";
                    this.b1 = "确认修改";
                    this.b2 = "";
                    this.b3 = "< 返回登陆";
                },

                changeBack(){
                    this.fg = false;
                    this.h1_c = "";
                    this.n2 = "请输入密码";
                    this.h1 = "电商后台管理系统";
                    this.b1 = "登陆";
                    this.b2 = "忘记密码";
                    this.b3 = "";
                },

                handleClick01(){
                    if(this.n1=="请输入用户名或邮箱"){
                        this.n1 = "";
                    }
                    if(this.n2==""){
                        if(this.b1=="确认修改"){
                            this.n2 = "请输入新的密码"
                        }else{
                            this.n2 = "请输入密码"
                        }                        
                    }else if(this.n3==""){
                        this.n3 = "请确认你的密码"
                    }
                },
                handleClick02(){
                    if(this.n2=="请输入密码"||this.n2=="请输入新的密码"){
                        this.n2 = "";
                    }                    
                    if(this.n1==""){
                        this.n1 = "请输入用户名或邮箱"
                    }else if(this.n3==""){
                        this.n3 = "请确认你的密码"
                    }
                },
                handleClick03(){
                    if(this.n3=="请确认你的密码"){
                        this.n3 = "";
                    }
                    
                    if(this.n1==""){
                        this.n1 = "请输入用户名或邮箱"
                    }else if(this.n2==""){
                        if(this.b1=="确认修改"){
                            this.n2 = "请输入新的密码"
                        }else{
                            this.n2 = "请输入密码"
                        }
                    }
                }
        }
    }

</script>

<style scoped>
    html{
        height: 100%;
        margin: 0;
        background-color:cadetblue;
    }
    .all{
        position: absolute;
        width: 99.2%;
        height: 99.2%;
        background-color:cadetblue;
        /* background-image: url(../web/web/img/1.jpeg); */
    }
     #total{
            margin-top: 15%;
            margin-left: 40%;
           
        }
    .tol{
        display: none;
    }
    .h1_c{
        margin-left: 5%;
    }
        .i{
            height: 30px;
            width: 220px;
            border: solid;
            border-radius: 8px;
        }
        .u{
            margin-bottom: 10px;
        }
        .dl{
            margin-left: 1.4%;
            height: 35px;
            width: 230px;
            border-radius: 8px;
            color: aliceblue;
            background-color: black;
            margin-bottom: 10px;
        }
        .forgot{
            border: 0;
            background-color: cadetblue;
        }
        .back{
            border: 0;
            background-color: cadetblue;
        }

</style>